<template>
	<view>
		<!-- 头部 -->
		<Header title="我的"></Header>
		<view class="my-top flex flex_center">
			<image class="avatar" :src="userInfo.pic"></image>
			<view v-if="loginStatus">
				<view class="name">{{userInfo.name}}</view>
				<view>{{userInfo.remark}}</view>
			</view>
			<view v-else>
				<view class="login-btn" @click="toLogin">登录</view>
				<view class="login-btn-mess">登录后查看更多内容哦</view>
			</view>
		</view>
		<view class="fun-list">
			<view class="fun-item flex flex_center" v-for="(item, index) in functions" :key="index" @click="functionFn(index)">
				<image class="icon" :src="'/static/img/'+item.icon+'.png'"></image>
				<text class="title">{{item.title}}</text>
				<uni-icons type="arrowright" color="#999999"></uni-icons>
			</view>
		</view>
		<button v-if="loginStatus" class="common-btn" type="primary" @click="logoutFn">退出登录</button>
	     <view v-if="showPhone" class="callPhone" @click="callPhone('15913701200')">呼叫15913701200</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	import { mapState} from 'vuex'
	export default {
		components: {
			Header
		},
		data() {
			return {
				showPhone: '',
				functions: [
					{title: '我的收藏', icon: 'my_collection', path: '/pages/my/myCollection/myCollection'},
					{title: '我的资源', icon: 'my_list', path: '/pages/my/myModel/myModel'},
					{title: '个人信息', icon: 'my_info', path: '/pages/my/personInfo/personInfo'},
					{title: '拨打电话', icon: 'dianhua', path: ''},
				],
			};
		},
		computed: {
			...mapState(['userInfo', 'loginStatus'])
		},
		onLoad() {
			// this.$store.dispatch('getUserInfo')
		},
		mounted() {
		  console.log(this.userInfo)
		  console.log(this.$store.state.userInfo)
		},
		methods: {
			// ...mapActions(['logout']),
			// 退出
			logoutFn() {
			  this.$store.commit('setLoginStatus', false)
			  this.$store.commit('setUserinfo', {})
			  this.$store.commit('setUid', '')
			  // uni.localStorage.clearStorageSync()
			  uni.navigateTo({
			  	url: '/pages/login/login'
			  })
			},
			// 个人中心功能跳转
			functionFn(index) {
				if (!this.loginStatus) {
					this.toLogin();
					return;
				}
				if (this.loginStatus && index == 3) {
					this.showPhone = !this.showPhone
				}
				
				uni.navigateTo({
					url: this.functions[index].path
				})
			},
			topClickFn() {
				if (this.username) return;
				this.toLogin();
			},
			callPhone (phone) {
			   uni.makePhoneCall({
			   	phoneNumber: phone
			   })
			},
			// 登录
			toLogin() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
.my-top {
	height: 400upx;
	padding: 64upx 56upx;
	color: #fff;
	background: url(../../static/img/my_bg.png) no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	.avatar {
		width: 160upx;
		height: 160upx;
		margin-right: 40upx;
		border-radius: 50%;
		background-color: #ffffff;
	}
	.login-btn {
		display: inline-block;
		width: 200upx;
		height: 60upx;
		margin-bottom: 30upx;
		line-height: 60upx;
		font-size: 36upx;
	}
	.login-btn-mess {
		font-size: 28upx;
	}
	.name {
		margin-bottom: 20upx;
		font-size: 36upx;
	}
}
.fun-list {
	padding: 0 20upx;
	background-color: #FFFFFF;
	border-top: 20upx solid #F7F7F7;
	border-bottom: 20upx solid #F7F7F7;
	.fun-item {
		height: 100upx;
		color: #666;
		border-bottom: 1px solid $uni-border-color;
		&:last-of-type {
			border-bottom: 0;
		}
		.icon {
			width: 44upx;
			height: 44upx;
			margin-right: 3%;
		}
		.title {
			width: 84%;
		}
	}
}
// 拨打电话
.callPhone {
	position: fixed;
	bottom: 140rpx;
	left: 0;
	height: 92rpx;
	background-color: #cfb787;
	width: 750rpx;
	color: #FFFFFF;
	line-height: 92rpx;
	text-align: center;
}
</style>
